let oInput = document.querySelectorAll("input");
let oSpan = document.querySelectorAll("span");

let oYzm = document.querySelector(".yzm");

let oZczh = document.querySelector(".zczh");
console.log(oZczh);
console.log(oInput);
console.log(oSpan);

oYzm.onclick = function () {
  oSpan[1].innerHTML = "请输入11位有效中国手机号码";
};

// 点击注册让手机号和密码是正确的
oZczh.onclick = function () {
  if (flagPhone == true && flagPassword == true) {
    let xhr = new XMLHttpRequest();
    xhr.open("post", "/goodsAndShoppingCart/addUser.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(`username=${oInput1.value}&userpass=${oInput2.value}`);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        fun(xhr.responseText);
      }
    };
  } else {
  }
};

// 输入手机号码
let flagPhone = false;
oInput[0].onblur = function () {
  let regPhone = /^1[3|4|5|7|8][0-9]{9}$/;
  if (regPhone.test(this.value)) {
    flagPhone = true;
    oSpan[1].innerHTML = "输入正确";
  } else {
    flagPhone = false;
    oSpan[1].innerHTML = "请输入11位有效中国手机号码";
  }
  console.log(flagPhone);
};

// 输入邮箱

let flagEm = false;
oInput[3].onblur = function () {
  let regEm =
    /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/;
  if (regEm.test(this.value)) {
    oSpan[8].innerHTML = "格式正确";
    flagEm = true;
  } else {
    oSpan[8].innerHTML = "请输入有效的电子邮箱地址";
    flagEm = false;
  }
  console.log(flagEm);
};

// 输入密码（8-12位数字字母组合）

let flagPassword = false;
oInput[1].onblur = function () {
  let regPassword = /^[A-Za-z0-9]{8,12}$/;
  if (regPassword.test(this.value)) {
    oSpan[3].innerHTML = "格式正确";
    flagPassword = true;
  } else {
    oSpan[3].innerHTML = "格式错误";
    flagPassword = false;
  }
  console.log(flagPassword);
};

// 请再次输入密码
let flagPy = false;
oInput[4].onblur = function () {
  if (this.value == oInput[1].value && this.value != "") {
    oSpan[10].innerHTML = "密码正确";
    flagPy = true;
  } else {
    oSpan[10].innerHTML = "抱歉，两次输入的密码不匹配";
    flagPy = false;
  }
  console.log(flagPy);
};

// 请输入随机验证码
function rand(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}
var num = "";
var str = "0123456789abcdef";
for (var i = 0; i < 4; i++) {
  num += str.charAt(rand(0, 15));
}
oSpan[5].innerHTML = num;

function randomCode() {
  var num = "";
  var str = "0123456789abcdef";
  for (var i = 0; i < 4; i++) {
    num += str.charAt(rand(0, 15));
  }
  console.log(num);
  oSpan[5].innerHTML = num;
}

oSpan[5].onclick;

let flagYz = false;
oInput[2].onblur = function () {
  if (oInput[2].value == oSpan[5].innerHTML) {
    flagYz = true;
  } else {
    oSpan[6].innerHTML = "验证码错误";
    flagYz = false;
  }
  console.log(flagYz);
};

// 请输入短信验证码
let flagTele = false;
oInput[5].onblur = function () {
  let regTele = /^[0-9]{6}/;
  if (regTele.test(this.value)) {
    flagTele = true;
    oSpan[12].innerHTML = "输入正确";
  } else {
    flagTele = false;
    oSpan[12].innerHTML = "请输入短信验证码";
  }
  console.log(flagTele);
};




// 一、先做前端的表单验证
//功能：所有前端的验证；
function isTest(){
	return isUserName()&&isPass();
	console.log("1")

}

//1、用户名的前端验证
function isUserName(){
	//1)、非空判断
	if($("#username").val()==""){
		return false;
		console.log("2")
	}
	//2)、格式判断
	// 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
	// let reg = /^[a-zA-Z_]\w{1,9}$/;
	let reg = /^1[3|4|5|7|8][0-9]{9}$/;
	if(!reg.test($("#username").val())){
		return false;
		console.log("2")

	}
	return true;
	console.log("4")

}


//2、密码的前端验证
function isPass(){
	//1)、非空判断
	if($("#userpass").val()==""){
		return false;
		console.log("5")

	}
	//2)、格式判断
	// 数字，6-16位
	// let reg = /^\d{6,16}$/;
	let reg =  /^[A-Za-z0-9]{8,12}$/;
	if(!reg.test($("#userpass").val())){
		return false;
		console.log("6")

	}
	return true;
	console.log("7")

}


//二、后端验证
let hasUser = false;//该用户名不存在
function hasUserBack(){
	//后端验证用户名是否存在
	// $.get("checkUser.php",{"username":$("#username").val()},function(data){
		$.get("../../../checkUser.php",{"username":$("#username").val()},function(data){
		if(data=="0"){
		console.log("8")

			// $("#showUser").html("亲，该用户名已经存在，请重新思考！");
			// $("#showUser").css({"color":"red"});
			hasUser = true;
		}else{
			// $("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
			// $("#showUser").css({"color":"green"});
			hasUser = false;
		console.log("9")

		}
	})
}

$(function(){		
		$("#username").blur(function(){
			//1、前端验证
			if(isUserName()==false){
		console.log("10")

				// $("#showUser").html("亲，用户名的格式不正确！");
				return;
			}
			//2、后端的验证
			hasUserBack();
		});	

		$("#userpass").blur(function(){
			//1、前端验证
			if(isPass()==false){
		console.log("11")

				// $("#showPass").html("亲，密码格式不正确	！");
				return;
			}else{
		console.log("12")

				$("#showPass").html("√");
			}
		});

		$("#btnReg").click(function(){
			//1、前端验证
			if(isTest()==false){
				console.log("13")

				// $("#messageBox").html("亲，您的信息输入不全");
				return;
			}
			//2、用户名是否存在(后端验证)
			if(hasUser){
				return;
		console.log("14")

			}		

			$.post(
				// "addUser.php",
				"../../../addUser.php",
				{
					"username":$("#username").val(),
					"userpass":$("#userpass").val()
				},
				function(data){
					if(data=="﻿success"){
		console.log("15")

						// $("#messageBox").css({"color":"green"});
						// $("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
						setTimeout(()=>{
							// location.href="login.html";
                            location.href ="http://127.0.0.1/goodsAndShoppingCart/lk/zhuce.html";
							console.log('成功')
							},2000);
					}else if(data=="﻿fail"){
						console.log('失败')

						// $("#messageBox").css({"color":"red"});
						// $("#messageBox").html("不好意思，注册失败!");
					}else{
						console.log('success')
						// $("#messageBox").css({"color":"red"});
						// $("#messageBox").html("不好意思，服务器出问题了!");
					}
				}
			);
		});
	});
	
